/*
  学习目标：生命周期-更新阶段
  步骤：
     1. render
     2. componentDidUpdate

  触发更新的两种方式:
    1. setState
    2. props改变

  注意:
    1. 更新阶段的钩子函数中, 不能执行setState, 否则死循环
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 99,
  };

  // 作用: 表示重新渲染
  render() {
    const { count } = this.state;

    return (
      <div>
        <Child count={count}></Child>
        <button
          onClick={() => {
            this.setState({ count: count + 1 });
          }}
        >
          点我
        </button>
      </div>
    );
  }

  componentDidUpdate() {
    // this.setState({ count: this.state.count + 1 });
  }
}

class Child extends React.Component {
  render() {
    console.log('render  ----->  ');
    return <div>{this.props.count}</div>;
  }

  // 作用: 表示更新后, 类似vue中的updated
  // 场景: 做缓存
  componentDidUpdate() {
    console.log('componentDidUpdate  ----->  ');
  }
}
